<template>
  <el-row :gutter="20" class="row">
    <el-col :span="14" :xs="24">
      <p class="title">文档目录授权(控制所有目录)</p>
      <el-row v-if="!_isAdd">
        <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowDownloads"
          />
          <span class="word">允许下载</span>
        </el-col>
        <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowUpload"
          />
          <span class="word">允许上传</span>
        </el-col>
        <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowView"
          />
          <span class="word">允许查看</span>
        </el-col>
        <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowPreview"
          />
          <span class="word">允许预览</span>
        </el-col>
        <!-- <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowDeleted"
          />
          <span class="word">允许删除</span>
        </el-col> -->
        <el-col :span="8">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="btnAllowObj.allowPrint"
          />
          <span class="word">允许打印</span>
        </el-col>
        <el-divider />
      </el-row>
      <el-tree
        class="tree-box"
        :data="groupTree"
        show-checkbox
        node-key="id"
        :default-checked-keys="_groupCheckedKeys"
        :props="{ label: 'categoryName', children: 'children' }"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :highlight-current="true"
        :check-strictly="true"
        ref="deptTreeRef"
        default-expand-all
        @node-click="nodeClick"
        @check="checkChange"
      >
        <template #default="{ node }">
          <span class="span-ellipsis">
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </el-col>
    <el-col :span="10" :xs="24" v-if="isShow">
      <p class="title">修改文档目录授权(当前点击目录)</p>
      <el-row>
        <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowDownloads"
          />
          <span class="word">允许下载</span>
        </el-col>
        <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowUpload"
          />
          <span class="word">允许上传</span>
        </el-col>
        <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowView"
          />
          <span class="word">允许查看</span>
        </el-col>
        <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowPreview"
          />
          <span class="word">允许预览</span>
        </el-col>
        <!-- <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowDeleted"
          />
          <span class="word">允许删除</span>
        </el-col> -->
        <el-col :span="12">
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="currentNodeObj.allowPrint"
          />
          <span class="word">允许打印</span>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup name="documentCategory">
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  isAdd: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  groupList: {
    // 所有文档目录，未变成树形
    type: Array,
    default: () => {
      return []
    },
  },
  groupTree: {
    type: Array,
    default: () => {
      return []
    },
  },
  groupTreeCheck: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const isShow = ref(false)
// 文档目录选中触发事件
const checkedNodes = ref([])
const btnAllowObj = ref({
  allowDownloads: '0',
  allowUpload: '0',
  allowView: '0',
  allowPreview: '0',
  // allowDeleted: '0',
  allowPrint: '0',
})
const currentNodeObj = ref({
  allowDownloads: '0',
  allowUpload: '0',
  allowView: '0',
  allowPreview: '0',
  // allowDeleted: '0',
  allowPrint: '0',
})

const _isAdd = computed(() => {
  return props.isAdd
})
const btnAllowStr = computed(() => {
  return JSON.stringify(btnAllowObj.value)
})

watch(
  btnAllowStr,
  (newVal, oldVal) => {
    const newObj = JSON.parse(newVal)
    const oldObj = JSON.parse(oldVal)
    props.groupList.forEach((element) => {
      for (let k in newObj) {
        if (newObj[k] !== oldObj[k]) {
          element[k] = newObj[k]
        }
      }
    })
  },
  {
    deep: true,
  }
)
// 默认选中的文档目录的fileCategoryId
const _groupCheckedKeys = computed(() => {
  return props.groupTreeCheck.map((element) => {
    return element.fileCategoryId
  })
})
// 所有文档目录id map
const _groupTreeMap = computed(() => {
  handelStatus()
  let _map = {}
  props.groupList.forEach((element) => {
    _map[element.id] = element
  })
  return _map
})
// 默认选中的文档目录 id map
const _groupCheckedKeysMap = computed(() => {
  let _map = {}
  props.groupTreeCheck.forEach((element) => {
    _map[element.fileCategoryId] = element
  })
  return _map
})

// 将选中的状态同步到所有数据里面
function handelStatus() {
  props.groupList.forEach((element) => {
    props.groupTreeCheck.forEach((item) => {
      if (element.id === item.fileCategoryId) {
        element.allowDownloads = item.allowDownloads
        element.allowUpload = item.allowUpload
        element.allowView = item.allowView
        element.allowPreview = item.allowPreview
        // element.allowDeleted = item.allowDeleted
        element.allowPrint = item.allowPrint
      }
    })
  })
}
function checkChange(val, node) {
  // 勾选触发选择该行
  proxy.$refs['deptTreeRef'].setCurrentKey(val.id)
  nodeClick(val)
  checkedNodes.value = node.checkedNodes
  emits('checkChange', checkedNodes.value)
}

// 初始化第一次进来没有触发选择check的时候，设置已经勾选数据
watch(_groupCheckedKeys, (val) => {
  isShow.value = false
  let arr = []
  val.forEach((element) => {
    arr.push(_groupTreeMap.value[element])
  })
  checkedNodes.value = arr
  emits('checkChange', checkedNodes.value)
})
function nodeClick(node) {
  isShow.value = true
  currentNodeObj.value = _groupTreeMap.value[node.id]
}
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}

function resetCate() {
  isShow.value = false
  btnAllowObj.value = {
    allowDownloads: '0',
    allowUpload: '0',
    allowView: '0',
    allowPreview: '0',
    // allowDeleted: '0',
    allowPrint: '0',
  }
  _groupCheckedKeys.value = []
}
defineExpose({
  resetCate,
})
</script>

<style lang="scss" scoped>
.tree-box {
  min-height: 300px;
  max-height: 350px;
  overflow-y: scroll;
}
.title {
  font-size: 14px;
  color: rgb(96, 98, 102);
}
.word {
  font-size: 14px;
  color: rgb(96, 98, 102);
  padding-left: 10px;
}
.apply {
  margin-top: 10px;
}
</style>
